<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #111;
        }
        .container{
            position: relative;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container i{
            position: absolute;
            inset: 0;
            border: 6px solid var(--clr);
            filter: drop-shadow(0 0 20px var(--clr));
            -webkit-filter: drop-shadow(0 0 20px var(--clr));
            transform: 0.5s;
            -webkit-transform: 0.5s;
            -moz-transform: 0.5s;
            -ms-transform: 0.5s;
            -o-transform: 0.5s;
        }
        .container i:nth-child(1){
            border-radius: 43% 57% 74% 26% / 44% 30% 70% 56%;
            -webkit-border-radius: 43% 57% 74% 26% / 44% 30% 70% 56%;
            -moz-border-radius: 43% 57% 74% 26% / 44% 30% 70% 56%;
            -ms-border-radius: 43% 57% 74% 26% / 44% 30% 70% 56%;
            -o-border-radius: 43% 57% 74% 26% / 44% 30% 70% 56%;
            animation: animate 6s linear infinite;
            -webkit-animation: animate 6s linear infinite;
        }
        .container i:nth-child(2){
            border-radius: 62% 38% 42% 58% / 52% 38% 62% 48%;
            -webkit-border-radius: 62% 38% 42% 58% / 52% 38% 62% 48%;
            -moz-border-radius: 62% 38% 42% 58% / 52% 38% 62% 48%;
            -ms-border-radius: 62% 38% 42% 58% / 52% 38% 62% 48%;
            -o-border-radius: 62% 38% 42% 58% / 52% 38% 62% 48%;
            animation: animate 4s linear infinite;
            -webkit-animation: animate 4s linear infinite;
        }
        .container i:nth-child(3){
            border-radius: 44% 56% 42% 58% / 37% 65% 35% 63%;
            -webkit-border-radius: 44% 56% 42% 58% / 37% 65% 35% 63%;
            -moz-border-radius: 44% 56% 42% 58% / 37% 65% 35% 63%;
            -ms-border-radius: 44% 56% 42% 58% / 37% 65% 35% 63%;
            -o-border-radius: 44% 56% 42% 58% / 37% 65% 35% 63%;
            animation: animate2 5s linear infinite;
            -webkit-animation: animate2 5s linear infinite;
        }
        @keyframes animate {
            0%{ transform:rotate(0deg) ; -webkit-transform:rotate(0deg) ; -moz-transform:rotate(0deg) ; -ms-transform:rotate(0deg) ; -o-transform:rotate(0deg) ; }
            100%{ transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); }
        }
        @keyframes animate2 {
            0%{ transform:rotate(360deg) ; -webkit-transform:rotate(360deg) ; -moz-transform:rotate(360deg) ; -ms-transform:rotate(360deg) ; -o-transform:rotate(360deg) ; }
            100%{ transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); }
        }
        .container .box{
            position: absolute;
            width: 300px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
        }
        .container .box h1{
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            font-size: 2em;
            text-transform: uppercase;
            color: #fff;
            -webkit-text-stroke: 2px #fff;
        }
        .container .box h1::before{
            content: attr(data-text);
            position: absolute;
            background: linear-gradient(90deg, #d630f2,#ff002f,#e4ff00,#03a9f4,#d630f2);
            /* 通过通道改变背景的宽度，就可以实现文字颜色读词效果。 */
            background-size: 300%;
            overflow: hidden;
            transition: width 2s;
            -webkit-transition: width 2s;
            -moz-transition: width 2s;
            -ms-transition: width 2s;
            -o-transition: width 2s;
            animation: animate3 5s linear infinite;
            -webkit-animation: animate3 5s linear infinite;
            /* 设置背景的宽为0 */
            width: 100%;
            /* 裁剪出文字的背景，即是楼空文字的意思 */
            background-clip: text;
            -webkit-background-clip: text;
            /*把裁剪缕空的文字弄透明，这样就可以通过缕空的形状看到背景颜色，这时背景颜色就是字体的颜色  */
            -webkit-text-fill-color: transparent;
        }
        .container .box img{
            width: 150px;
            height: 150px;
            object-fit: cover;
            position: absolute;
            top: -70%;
        }
        .container .box span{
            position: absolute;
            top: 80%;
            font-size: 1em;
            color: #fff;
        }
        @keyframes animate3 {
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: 300% 0;
            }
        }
    </style>
    <title>Animated Jump Page</title>
</head>
<body>
    <div class="container">
        <i style="--clr:#00ff0a;"></i>
        <i style="--clr:#ff0057;"></i>
        <i style="--clr:#fffc44;"></i>
        <div class="box">
            <img src="" alt="">
            <h1 data-text="5">5</h1>
            <span>秒后自动跳转…</span>
        </div>
    </div>
    <script>
        let text = document.querySelector('.box>h1')

        var countdownValue = 5;
		
		// Start the countdown
		var countdownInterval = setInterval(function() {
			// Decrement the countdown value
			countdownValue--;
			
			// Update the countdown element
			text.dataset.text = text.innerHTML = countdownValue;
			
			// Check if the countdown has finished
			if (countdownValue === 0) {
				// Redirect to the specified URL
				// window.location.href = redirectUrl;
				console.log("跳转")
				// Clear the countdown interval
				clearInterval(countdownInterval);
			}
		}, 1000);
    </script>
</body>
</html>